<template>
	<div>
	  <router-link to="/" tag="div" class="header-abs" v-show="Showabs">
		<div class="iconfont header-abs-back">&#xe633;</div>
	  </router-link>
	  <div class="fixed" v-show="!Showabs" :style="opacityStyle">
 	  <div class="header">
  		城市选择
  	      <router-link to="/" tag="div" class="iconfont return-icon">&#xe633;</router-link>
	   </div>
      </div>
	</div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data (){
  	return {
  		Showabs:true,
  		opacityStyle:{
  			opacity:0
  		}
  	}
  },
  methods:{

  	handleScroll(){
  		console.log(top)
  		const top = document.documentElement.scrollTop
  		if(top > 60 ){
  			this.opacityStyle={ 
  				opacity: top / 140
  			}
  			this.Showabs = false
  		}else{
  			this.Showabs = true
  		}
  	}

  },
  activated(){
  	window.addEventListener('scroll' ,this.handleScroll)
  },
  deactivated(){
  	window.removeEventListener('scroll' ,this.handleScroll)
  },
}

</script>

<style lang="stylus"  scoped >
 .header-abs
 	position:absolute
 	top:.3rem
 	left:.3rem
 	width:.8rem
 	height:.8rem
 	border-radius:.4rem
 	line-height:.8rem
 	background:rgba(0, 0, 0, .7)
 	text-align:center
 	.header-abs-back
 		color:#fff
 		font-weight:700
 		font-size:.35rem
.fixed
	position:fixed
	width:100%
	top:0
	left:0
 .header
	  background:#00bcd4
	  line-height:.86rem
	  overflow:hidden
	  text-align:center
	  color:#fff
	  font-size:0.3rem
	  .return-icon
	  	float:left
	  	font-size:0.4rem
	  	margin-left:0.1rem
	  	color:#fff
	  	font-weight:700
</style>
